<docs>
---
title: 定制化提示集的样式

---

通过 `style` 属性来定制化提示集的样式。
 
通过 `itemStyle` 和 `itemHoverStyle` 还有 `itemActiveStyle` 属性来定制化单个提示集的样式。
</docs>

<script setup lang="ts">
import type { PromptsItemsProps } from 'vue-element-plus-x/types/Prompts'

const items = ref<PromptsItemsProps[]>([
  {
    key: '1',
    label: '🐛 提示集组件标题',
    description: '描述信息'.repeat(3),
    itemStyle: { width: 'calc(50% - 6px)', transition: 'background .3s' },
    itemHoverStyle: { background: 'linear-gradient(to bottom right, rgba(223, 59, 61, 0.9), rgba(203, 52, 244, 0.9)' },
    itemActiveStyle: { background: 'linear-gradient(to bottom right, rgba(58, 32, 164, 0.9), rgba(254, 166, 223, 0.9)' },
  },
  {
    key: '2',
    label: '🐛 我是被禁用的',
    disabled: true,
    itemStyle: { width: 'calc(50% - 6px)', transition: 'background .3s' },
    itemHoverStyle: { background: 'linear-gradient(to bottom right, rgba(223, 59, 61, 0.9), rgba(203, 52, 244, 0.9)' },
    itemActiveStyle: { background: 'linear-gradient(to bottom right, rgba(58, 32, 164, 0.9), rgba(254, 166, 223, 0.9)' },

  },
  {
    key: '3',
    label: '🐛 单个禁用控制更准确',
    disabled: true,
    itemStyle: { width: 'calc(50% - 6px)', transition: 'background .3s' },
    itemHoverStyle: { background: 'linear-gradient(to bottom right, rgba(223, 59, 61, 0.9), rgba(203, 52, 244, 0.9)' },
    itemActiveStyle: { background: 'linear-gradient(to bottom right, rgba(58, 32, 164, 0.9), rgba(254, 166, 223, 0.9)' },
  },
  {
    key: '4',
    label: '🐛 提示集组件标题',
    itemStyle: { width: 'calc(50% - 6px)', transition: 'background .3s' },
    itemHoverStyle: { background: 'linear-gradient(to bottom right, rgba(223, 59, 61, 0.9), rgba(203, 52, 244, 0.9)' },
    itemActiveStyle: { background: 'linear-gradient(to bottom right, rgba(58, 32, 164, 0.9), rgba(254, 166, 223, 0.9)' },
  },
])

function handleItemClick(item: PromptsItemsProps) {
  ElMessage.success(`点击了 ${item.key}`)
}
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px;">
    <Prompts title="🐵 提示集组件标题" :items="items" @item-click="handleItemClick" wrap
      :style="{ width: '300px', padding: '12px', borderRadius: '8px', background: 'linear-gradient(to bottom right, rgba(237, 43, 114, 0.9), rgba(223, 67, 62, 0.9)' }" />
  </div>
</template>

<style scoped lang="less">
:deep(.el-prompts) {
  .el-prompts-title {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
  }
}
</style>
